Angular Material একটি জনপ্রিয় UI লাইব্রেরি যা ম্যাটেরিয়াল ডিজাইন গাইডলাইন অনুসরণ করে এবং অ্যাঙ্গুলার অ্যাপ্লিকেশনগুলির জন্য বিভিন্ন প্রি-বিল্ট কম্পোনেন্ট সরবরাহ করে। এর মধ্যে একটি জনপ্রিয় কম্পোনেন্ট হল MatSelect, যা ড্রপডাউন সিলেক্ট বক্স তৈরি করতে ব্যবহৃত হয়। মাল্টিপল সিলেকশন সাপোর্টের মাধ্যমে ব্যবহারকারীরা একাধিক অপশন সিলেক্ট করতে পারেন। এই টিউটোরিয়ালে, আমরা Angular Material এর MatSelect কম্পোনেন্ট ব্যবহার করে মাল্টিপল সিলেকশন তৈরি করার পদ্ধতি জানবো।

MatSelect কম্পোনেন্ট এবং মাল্টিপল সিলেকশন

MatSelect কম্পোনেন্টটি ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়, যেখানে multiple অ্যাট্রিবিউট যুক্ত করলে একাধিক অপশন সিলেক্ট করা সম্ভব হয়। এই ফিচারটি সাধারণত ফর্মগুলিতে, যেখানে একাধিক অপশন সিলেক্ট করার প্রয়োজন থাকে, ব্যবহৃত হয়।

মাল্টিপল সিলেকশন তৈরি করা

১. Angular Material ইন্সটল করা

প্রথমেই Angular Material ইনস্টল করতে হবে, যদি আগে থেকে ইন্সটল না থাকে:

npm install @angular/material

২. MatSelectModule ইমপোর্ট করা

আপনার app.module.ts ফাইলে MatSelectModule ইমপোর্ট করতে হবে:

import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  declarations: [AppComponent],
  imports: [MatSelectModule, MatFormFieldModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

৩. HTML কোডে মাল্টিপল সিলেকশন ব্যবহার করা

এখন MatSelect কম্পোনেন্টে multiple অ্যাট্রিবিউট ব্যবহার করে একাধিক অপশন সিলেক্ট করতে পারবেন। নিচে একটি উদাহরণ দেওয়া হলো:

<mat-form-field appearance="fill">
  <mat-label>Select multiple options</mat-label>
  <mat-select multiple [(value)]="selectedOptions">
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>
</mat-form-field>

৪. Typescript কোড

এখানে selectedOptions একটি অ্যারে, যা সিলেক্ট করা অপশনগুলো ধারণ করবে, এবং options হল সিলেক্ট করতে পারা অপশনগুলির একটি অ্যারে।

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];
  selectedOptions = ['Option 1']; // Default selected option
}

এখানে, [(value)]="selectedOptions" ব্যবহার করা হয়েছে, যাতে সিলেক্ট করা অপশনগুলো selectedOptions অ্যারে-তে স্টোর হয়।

মাল্টিপল সিলেকশন কাস্টমাইজ করা

১. ডিফল্ট সিলেকশন

আপনি selectedOptions অ্যারে-তে ডিফল্ট ভ্যালু দিয়ে কিছু অপশন সিলেক্ট করতে পারেন। যেমন:

selectedOptions = ['Option 1', 'Option 3'];

এতে প্রথমে Option 1 এবং Option 3 সিলেক্ট হবে।

২. কাস্টম স্টাইল এবং লেবেল

আপনি mat-form-field এর appearance অ্যাট্রিবিউট ব্যবহার করে ফিল্ডের স্টাইল কাস্টমাইজ করতে পারেন:

<mat-form-field appearance="outline">
  <mat-label>Select multiple options</mat-label>
  <mat-select multiple [(value)]="selectedOptions">
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>
</mat-form-field>

এখানে appearance="outline" এর মাধ্যমে আউটলাইন স্টাইল প্রদান করা হয়েছে।

৩. ডাইনামিক অপশন পরিবর্তন

আপনি চাইলে options অ্যারে এর উপাদান ডাইনামিকভাবে পরিবর্তন করতে পারেন:

options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];

// Dynamically adding an option
addOption(option: string) {
  this.options.push(option);
}

এটি addOption() মেথডে নতুন অপশন অ্যারে-তে যোগ করবে এবং ড্রপডাউনে তা দেখাবে।

৪. ডিফল্ট ওয়ালিডেশন

Angular Reactive Forms বা Template Driven Forms ব্যবহার করলে, আপনি mat-select এর সাথে ওয়ালিডেশন যোগ করতে পারেন। যেমন:

<mat-form-field appearance="fill">
  <mat-label>Select multiple options</mat-label>
  <mat-select multiple formControlName="selectedOptions" required>
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="formControl.hasError('required')">
    You must select at least one option
  </mat-error>
</mat-form-field>

এখানে required অ্যাট্রিবিউট ব্যবহার করে অপশন সিলেকশনের জন্য ওয়ালিডেশন যোগ করা হয়েছে।

Angular Material এর MatSelect কম্পোনেন্ট মাল্টিপল সিলেকশন করার একটি সহজ এবং কার্যকরী উপায়। এটি বিভিন্ন ধরনের ফর্মের জন্য উপযোগী, যেখানে ব্যবহারকারীকে একাধিক অপশন নির্বাচন করার সুযোগ দেওয়া হয়। multiple অ্যাট্রিবিউট ব্যবহার করে ড্রপডাউন তালিকা থেকে একাধিক আইটেম সিলেক্ট করা যায়, এবং ngFor দিয়ে অপশনগুলি ডাইনামিকভাবে তৈরি করা যায়। Angular Material এর সঠিক কনফিগারেশন ও কাস্টমাইজেশন দিয়ে আপনি একটি সুন্দর এবং ব্যবহারযোগ্য মাল্টিপল সিলেকশন ফিচার তৈরি করতে পারবেন।